<template>
  <div class="ymdiv">
    <div class="descriptions">
      <el-descriptions title="安排专题" direction="vertical" :column="4" :size="3" border>
        <el-descriptions-item label="选择专题" :span="1">
          <el-select v-model="value" multiple placeholder="Select" style="width: 240px"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select
        ></el-descriptions-item>
        <el-descriptions-item label="选择组织" :span="1">
          <el-select v-model="value" multiple placeholder="Select" style="width: 240px"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select
        ></el-descriptions-item>
        <el-descriptions-item label="是否考试" :span="2"> <el-switch v-model="isexam" style="--el-switch-on-color: #13ce66" inline-prompt active-text="是" inactive-text="否" /></el-descriptions-item>
        <el-descriptions-item v-if="isexam == true" label="选择试卷" :span="1">
          <el-select v-model="sjvalue" class="m-2" placeholder="选择试卷"> <el-option v-for="item in sjoptions" :key="item.value" :label="item.label" :value="item.value" /> </el-select
        ></el-descriptions-item>
        <el-descriptions-item label="设置奖励" :span="1"> <el-input-number v-model="num" :min="0" /> </el-descriptions-item>
        <el-descriptions-item label="开始时间" :span="1"> <el-date-picker v-model="starttime" type="datetime" /> </el-descriptions-item>
        <el-descriptions-item label="结束时间" :span="4"> <el-date-picker v-model="endtime" type="datetime" /> </el-descriptions-item>
        <el-descriptions-item label="操作"><el-button type="primary">添加</el-button></el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { reactive, toRefs } from '@vue/reactivity';

export default defineComponent({
  setup() {
    const data = reactive({
      kcname: '',
      ispublic: false,
      isexam: false,
      num: 0,
      starttime: '',
      endtime: '',
      options: [
        {
          value: '财务部',
          label: '财务部',
        },
        {
          value: '开发部',
          label: '开发部',
        },
      ],
      sjoptions: [
        {
          value: 'vue考试',
          label: 'vue考试',
        },
        {
          value: 'js考试',
          label: 'js考试',
        },
      ],
      value: '',
      sjvalue: '',
    });

    return {
      ...toRefs(data),
    };
  },
});
</script>
<style scoped>
.descriptions {
  padding: 20px;
}
</style>
